import Image from "next/image";

interface AboutMeProps {
  calculateWorkYears: () => number;
}

export const AboutMe = ({ calculateWorkYears }: AboutMeProps) => {
  return (
    <div className="max-w-6xl mx-auto">
      <div className="grid md:grid-cols-2 gap-8 items-center">
        <div className="flex justify-center">
          <Image
            src="/profile.jpg"
            alt="个人头像"
            width={300}
            height={300}
            className="rounded-full border-4 border-white shadow-lg"
          />
        </div>
        <div>
          <h3 className="text-2xl font-semibold mb-4">
            仰望屮川 | 前端开发工程师
          </h3>
          <p className="mb-4">
            {calculateWorkYears()}年全栈开发经验，精通React和Node.js
          </p>
          <div className="space-y-2">
            {["React", "TypeScript", "Node.js", "Next.js"].map((skill) => (
              <div key={skill} className="flex items-center">
                <span className="w-24 font-medium">{skill}</span>
                <div className="h-2 bg-blue-200 rounded-full flex-grow">
                  <div
                    className="h-full bg-blue-500 rounded-full"
                    style={{ width: `${Math.random() * 70 + 30}%` }}
                  ></div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
};